<template>
  <div style="height: 100%; overflow: auto">
    <transition name="fade">
      <Cropper
        v-if="dialogCropperVisible"
        :option-img="optionImg"
        :fileinfo="fileinfo"
        use-type="PUBLIC_IMG"
        :fixed-number="[500, 500]"
        @formSubmit="cropperSubmit"
        @formClose="cropperClose"
      />
    </transition>
    <OptionTitle
      title="底部导航"
      :sub-title="`点击自定义上传图标（建议尺寸200*200像素）`"
    />
    <div>
      <Draggable
        v-model="tabbarList"
        class="list_warp"
        draggable=".item"
        @end="dragSuccess"
      >
        <template v-for="item in tabbarList">
          <div v-if="item.code !== 'N_INDEX' && item.code !== 'N_MYSELF'" :key="item.name" class="item">
            <img
              v-if="item.name !== '首页'"
              class="drag"
              src="@/assets/icon/drag.png"
              alt=""
            >
            <div class="header df_sb">
              <div>{{ item.name }}</div>
              <el-checkbox
                v-model="item.selected"
                true-label="1"
                false-label="0"
                :disabled="item.required == '1'"
                @change="compareModule"
              />
            </div>
            <div class="item_edit_name df_ac mb10 mt10">
              <span>显示名称：</span>
              <div class="flex1 input_wrap">
                <el-input
                  v-model="item.nameTemp"
                  :disabled="item.rename == '0'"
                  :maxlength="item.maxNameNum"
                  @blur="compareModule"
                />
                <span
                  class="text placeholder9"
                >{{ item.nameTemp && item.nameTemp.length || 0 }}/{{
                  item.maxNameNum
                }}</span>
              </div>
            </div>
            <div class="item_imgs">
              <div class="img_wrap">
                <div class="img">
                  <img :src="item.iconNoSelected" alt="">
                  <el-upload
                    class="device-uploader"
                    accept=".jpg,.png"
                    :auto-upload="false"
                    :action="uploadFileUrl"
                    :data="uploadParam"
                    :show-file-list="false"
                    :on-change="(file) => addFileChange(file, item.code, false)"
                  >
                    <div class="upload_btn">重新上传</div>
                  </el-upload>
                </div>
                <span>未选中</span>
              </div>
              <div class="img_wrap">
                <div class="img">
                  <img :src="item.iconSelected" alt="">
                  <el-upload
                    class="device-uploader"
                    accept=".jpg,.png"
                    :auto-upload="false"
                    :action="uploadFileUrl"
                    :data="uploadParam"
                    :show-file-list="false"
                    :on-change="(file) => addFileChange(file, item.code, true)"
                  >
                    <div class="upload_btn">重新上传</div>
                  </el-upload>
                </div>
                <span>已选中</span>
              </div>
            </div>
          </div>
        </template>

        <template slot="header">
          <template
            v-for="item in tabbarList.filter(
              (i) => i.sortChange == '0'
            )"
          >
            <div v-if="item.code === 'N_INDEX'" :key="item.code" class="itemHome">
              <div class="header df_sb">
                <div>{{ item.name }}</div>
                <el-checkbox
                  v-model="item.selected"
                  true-label="1"
                  false-label="0"
                  :disabled="item.required == '1'"
                />
              </div>
              <div class="item_edit_name df_ac mb10 mt10">
                <span>显示名称：</span>
                <div class="flex1 input_wrap">
                  <el-input v-model="item.nameTemp" :disabled="item.rename == '0'" :maxlength="item.maxNameNum" />
                  <span class="text placeholder9">{{ item.nameTemp && item.nameTemp.length || 0 }}/{{ item.maxNameNum }}</span>
                </div>
              </div>
              <div class="item_imgs">
                <div class="img_wrap">
                  <div class="img">
                    <img :src="item.iconNoSelected" alt="">
                    <el-upload
                      class="device-uploader"
                      accept=".jpg,.png"
                      :auto-upload="false"
                      :action="uploadFileUrl"
                      :data="uploadParam"
                      :show-file-list="false"
                      :on-change="
                        (file) => addFileChange(file, item.code, false)
                      "
                    >
                      <div class="upload_btn">重新上传</div>
                    </el-upload>
                  </div>
                  <span>未选中</span>
                </div>
                <div class="img_wrap">
                  <div class="img">
                    <img :src="item.iconSelected" alt="">
                    <el-upload
                      class="device-uploader"
                      accept=".jpg,.png"
                      :auto-upload="false"
                      :action="uploadFileUrl"
                      :data="uploadParam"
                      :show-file-list="false"
                      :on-change="
                        (file) => addFileChange(file, item.code, true)
                      "
                    >
                      <div class="upload_btn">重新上传</div>
                    </el-upload>
                  </div>
                  <span>已选中</span>
                </div>
              </div>
            </div>
          </template>
        </template>
        <template slot="footer">
          <div class="itemHome">
            <div class="header df_sb">
              <div>{{ finallyItem.name }}</div>
              <el-checkbox
                v-model="finallyItem.selected"
                true-label="1"
                false-label="0"
                :disabled="finallyItem.required == '1'"
              />
            </div>
            <div class="item_edit_name df_ac mb10 mt10">
              <span>显示名称：</span>
              <div class="flex1 input_wrap">
                <el-input v-model="finallyItem.nameTemp" :disabled="finallyItem.rename == '0'" :maxlength="finallyItem.maxNameNum" />
                <span class="text placeholder9">{{ finallyItem.nameTemp && finallyItem.nameTemp.length || 0 }}/{{ finallyItem.maxNameNum }}</span>
              </div>
            </div>
            <div class="item_imgs">
              <div class="img_wrap">
                <div class="img">
                  <img :src="finallyItem.iconNoSelected" alt="">
                  <el-upload
                    class="device-uploader"
                    accept=".jpg,.png"
                    :auto-upload="false"
                    :action="uploadFileUrl"
                    :data="uploadParam"
                    :show-file-list="false"
                    :on-change="
                      (file) => addFileChange(file, finallyItem.code, false)
                    "
                  >
                    <div class="upload_btn">重新上传</div>
                  </el-upload>
                </div>
                <span>未选中</span>
              </div>
              <div class="img_wrap">
                <div class="img">
                  <img :src="finallyItem.iconSelected" alt="">
                  <el-upload
                    class="device-uploader"
                    accept=".jpg,.png"
                    :auto-upload="false"
                    :action="uploadFileUrl"
                    :data="uploadParam"
                    :show-file-list="false"
                    :on-change="
                      (file) => addFileChange(file, finallyItem.code, true)
                    "
                  >
                    <div class="upload_btn">重新上传</div>
                  </el-upload>
                </div>
                <span>已选中</span>
              </div>
            </div>
          </div>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import Cropper from '@/components/cropper'
import OptionTitle from '../../../components/optionTitle.vue'
import { uploadFile, getRenovationNavicationInfo } from '@/api'
export default {
  components: {
    Draggable,
    OptionTitle,
    Cropper
  },
  data() {
    return {
      tabbarList: [],
      finallyItem: {},
      tabbarListTemp: [],

      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'PUBLIC_IMG'
      },
      itemIndexTemp: {
        index: 0,
        selected: false
      } // 记录上传点击的item
    }
  },
  watch: {
    tabbarList: {
      handler: function(newValue) {
        // this.compareModule()
        this.$bus.$emit('miniTabbarChange', newValue)
      },
      // immediate: true,
      deep: true
    }
  },
  created() {
    this.initTabbarList()
  },
  methods: {
    initTabbarList() {
      getRenovationNavicationInfo({ param: {}}).then(res => {
        const Temp = [...res.record.navigationList]
        Temp.forEach(item => {
          item.nameTemp = item.name
        })
        this.tabbarList = [...Temp]
        this.finallyItem = Temp[Temp.length - 1]
        this.tabbarListTemp = JSON.parse(JSON.stringify(Temp))
      })
    },
    compareModule() {
      const { tabbarListTemp, tabbarList } = this
      let count = 0
      tabbarListTemp.forEach((item, i) => {
        if (item.name !== tabbarList[i].nameTemp) {
          count++
        }
        if (item.selected !== tabbarList[i].selected) {
          count++
        }
        if (item.iconSelected !== tabbarList[i].iconSelected) {
          count++
        }
        if (item.iconNoSelected !== tabbarList[i].iconNoSelected) {
          count++
        }
      })
      this.$store.dispatch('app/compareTabbarAction', count > 0)
    },
    dragSuccess() {
      const index = this.tabbarList.findIndex(i => i.code === 'N_MYSELF')
      const temp = { ...this.tabbarList[index] }
      if (index !== this.tabbarList.length - 1) {
        this.tabbarList.splice(index, 1)
        this.tabbarList.push(temp)
      }
      this.compareModule()
      this.$bus.$emit('miniTabbarChange', this.tabbarList)
    },
    async addFileChange(file, code, selected) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
      const index = this.tabbarList.findIndex(i => i.code === code)
      this.itemIndexTemp = {
        index,
        selected
      }
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      this.isShowCropper = false
      if (config.success) {
        const { insertUrl, showUrl } = config
        const { index, selected } = this.itemIndexTemp
        const arrTemp = [...this.tabbarList]
        if (selected) {
          arrTemp[index].iconSelected = showUrl
        } else {
          arrTemp[index].iconNoSelected = showUrl
        }
        this.tabbarList = arrTemp
        this.fileinfo = config
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || '上传失败')
        this.dialogCropperVisible = false
      }
    },
    cropperClose() {
      this.dialogCropperVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list_warp {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  height: calc(100% - 100px);
  overflow: auto;
  .item {
    width: 215px;
    height: 257px;
    border-radius: 2px;
    border: 1px solid #dfe2e8;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .header {
      height: 36px;
      padding: 0 10px;
      padding-left: 20px;
      background: #f4f7fc;
    }
    .item_edit_name {
      padding: 0 10px;
      .input_wrap {
        position: relative;
        ::v-deep .el-input__inner {
          padding-right: 40px;
          padding-left: 10px;
        }
        .text {
          position: absolute;
          top: 11px;
          right: 10px;
        }
      }
    }
    .item_imgs {
      display: flex;
      justify-content: space-evenly;
      .img_wrap {
        text-align: center;
        .img {
          border: 1px solid #dfe2e8;
          border-radius: 2px;
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 4px;
          position: relative;
          cursor: pointer;
          &:hover {
            .upload_btn {
              display: block;
            }
          }
          .upload_btn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #979898;
            color: #fff;
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: none;
            font-size: 12px;
          }
          img {
            width: 60%;
            height: 60%;
          }
        }
      }
    }
    .drag {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
    }
  }
  .itemHome {
    width: 215px;
    height: 257px;
    border-radius: 2px;
    border: 1px solid #dfe2e8;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .header {
      height: 36px;
      padding: 0 10px;
      padding-left: 20px;
      background: #f4f7fc;
    }
    .item_edit_name {
      padding: 0 10px;
      .input_wrap {
        position: relative;
        ::v-deep .el-input__inner {
          padding-right: 40px;
          padding-left: 10px;
        }
        .text {
          position: absolute;
          top: 11px;
          right: 10px;
        }
      }
    }
    .item_imgs {
      display: flex;
      justify-content: space-evenly;
      .img_wrap {
        text-align: center;
        .img {
          border: 1px solid #dfe2e8;
          border-radius: 2px;
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 4px;
          position: relative;
          cursor: pointer;
          &:hover {
            .upload_btn {
              display: block;
            }
          }
          .upload_btn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #979898;
            color: #fff;
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: none;
            font-size: 12px;
          }
          img {
            width: 60%;
            height: 60%;
          }
        }
      }
    }
  }
}
</style>
